<template>
  <section @touchmove.prevent.stop>
    <ul class="footer-nav">
      <template v-for="(nav, index) in nav_list">
        <li @click="navTo(nav)" :key="index">
          <img v-if="navIndex===index" :src="nav.img_1" alt="">
          <img v-else :src="nav.img_0" alt="">
          <span>{{nav.title}}</span>
        </li>
      </template>
    </ul>
  </section>
</template>
<script>
  export default {
    name: 'foot-nav',
    props: {
      navIndex: {
        type: Number,
        required: true,
      }
    },
    data() {
      return {
        nav_list: [
          {
            path: '/home',
            img_0: require('../img/footer/home-0.png'),
            img_1: require('../img/footer/home-1.png'),
            title: '首页'
          },
          {
            path: '/dynamic',
            img_0: require('../img/footer/hotspot-0.png'),
            img_1: require('../img/footer/hotspot-1.png'),
            title: '动态'
          },
          {
            path: '/sign',
            img_0: require('../img/footer/sign-0.png'),
            img_1: require('../img/footer/sign-1.png'),
            title: '签到'
          },
          {
            path: '/user',
            img_0: require('../img/footer/user-0.png'),
            img_1: require('../img/footer/user-1.png'),
            title: '我的'
          }
        ]
      }
    },
    methods: {
      navTo(nav) {
        this.$router.replace({path: nav.path})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .footer-nav { // 主页底部导航
    height: 50px;
    background: #fff;
    box-sizing: border-box;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    li {
      position: relative;
      flex: 1 1 auto;
      margin: 0 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      img {
        align-self: center;
        height: 22px;
      }
      span {
        margin-top: 6px;
        font-size: 10px;
        color: #555;
      }
    }
  }
</style>
